<template>
    <div class="header">
        <el-header style="text-align: right; font-size: 12px">
      		<el-dropdown @command="handleCommand" trigger="click">
        		<i class="el-icon-setting" style="margin-right: 15px;font-size:30px"></i>
        		<el-dropdown-menu slot="dropdown">
        			<el-dropdown-item command="change">修改密码</el-dropdown-item>
        			<el-dropdown-item command="quit">退出</el-dropdown-item>
        		</el-dropdown-menu>
      		</el-dropdown>
    	</el-header>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    mounted(){

    },
    methods:{
        handleCommand(e){
            console.log(e)
            switch (e) {
                case 'quit':
                    console.log('退出')
                    this.loginout()
                    break;

                default:
                    console.log('修改密码')
                    break;
            }
        },
        //退出
        async loginout(){

            let {data:{code,data}} = await this.$http.post(this.$api.loginout,{})

            if (code === 0) {
                this.$message({
                    message: data,
                    type: 'success'
                });
                localStorage.removeItem('userid')
                localStorage.removeItem('isLogin')
                this.$router.push('/login')
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .header{
        background-color: #B3C0D1;
        .el-header{
            line-height: 60px;
        }
        img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-block;
            margin-top: 10px;
        }
    }
</style>